<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<style>
			.mui-control-content {
				height: calc(100vh - 44px) !important;

			}

			.mui-scroll-wrapper {
				overflow: auto;
			}

			.mui-control-content .mui-loading {
				margin-top: 50px;
			}

			.mui-col-xs-1 {
				width: 20%;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">

			<div class="order-nav">
				<div id="slider" class="mui-slider">
					<!-- 顶部导航切换 -->
					<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1">全部</a>
						<a class="mui-control-item" href="#item2">待付款</a>
						<a class="mui-control-item" href="#item3">待发货</a>
						<a class="mui-control-item" href="#item4">待收货</a>
						<a class="mui-control-item" href="#item5">已完成</a>
					</div>
					<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-1"></div>
					<!-- 主体数据列表 -->
					<div class="mui-slider-group">
						<!-- mui-active -->
						<div id="item1" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!-- 全部 -->
									<!-- <div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div> -->
									<!-- 暂无订单 -->
									<div class="no-order">
										<img src="../../../../images/cart/icon_default_order.png"
											class="icon_default_order">
									</div>
								</div>
							</div>
						</div>
						<div id="item2" class="mui-slider-item mui-control-content">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!-- loading 状态  可以用于数据请求前展示 请求后隐藏 -->
									<div hidden class="mui-loading">
										<div class="mui-spinner">
											<!-- 1 -->
										</div>
									</div>
									<!-- 列表数据 -->
									<div class="cart-list">
										<!-- 渲染区域 -->
										<div class="cart-list-item">
											<div class="cart-list-item-top">
												<div class="order-code">
													订单编号：<span class="order-code-id">202103221448560001</span>
												</div>
												<div class="order-status">
													待付款
												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="cart-list-item-bottom">
												<div class="order-youhui">
													<span id="">
														已优惠<span class="youhui-num">20.00</span>元 ,
													</span>
												</div>
												<div class="order-status">
													实付: <span class="fuhao">￥</span><span
														class="shifu-num">180.00</span><span
														class="no-yunfei">(免运费)</span>
												</div>
											</div>
											<!-- 操作按钮区域 -->
											<div class="order-edit">
												<div class="order-btn cancel-btn">
													取消订单
												</div>
												<div class="order-btn pay-btn">
													立即支付
												</div>
											</div>
										</div>

									</div>
									<!-- 数据完毕 -->
								</div>
							</div>
						</div>

						<div id="item3" class="mui-slider-item mui-control-content">
							<div id="scroll3" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!-- 3 -->
									<!-- <div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div> -->
									<!-- 列表数据 -->
									<div class="cart-list">
										<!-- 渲染区域 -->
										<div class="cart-list-item">
											<div class="cart-list-item-top">
												<div class="order-code">
													订单编号：<span class="order-code-id">202103221448560001</span>
												</div>
												<div class="order-status">
													待发货
												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="cart-list-item-bottom">
												<div class="order-youhui">
													<span id="">
														已优惠<span class="youhui-num">20.00</span>元 ,
													</span>
												</div>
												<div class="order-status">
													实付: <span class="fuhao">￥</span><span
														class="shifu-num">180.00</span><span
														class="no-yunfei">(免运费)</span>
												</div>
											</div>
											<!-- 操作按钮区域 -->
											<div class="order-edit">
												<div class="order-btn cancel-btn">
													取消订单
												</div>
												<div class="order-btn remind-btn">
													提醒发货
												</div>
											</div>
										</div>

									</div>
									<!-- 数据完毕 -->
								</div>
							</div>
						</div>
						<div id="item4" class="mui-slider-item mui-control-content">
							<div id="scroll4" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!-- <div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div> -->
									<!-- 列表数据 -->
									<div class="cart-list">
										<!-- 渲染区域 -->
										<div class="cart-list-item">
											<div class="cart-list-item-top">
												<div class="order-code">
													订单编号：<span class="order-code-id">202103221448560001</span>
												</div>
												<div class="order-status">
													待收货
												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="cart-list-item-bottom">
												<div class="order-youhui">
													<span id="">
														已优惠<span class="youhui-num">20.00</span>元 ,
													</span>
												</div>
												<div class="order-status">
													实付: <span class="fuhao">￥</span><span
														class="shifu-num">180.00</span><span
														class="no-yunfei">(免运费)</span>
												</div>
											</div>
											<!-- 操作按钮区域 -->
											<div class="order-edit">
												<div class="order-btn wuliu-btn">
													查看物流
												</div>
												<div class="order-btn makesure-btn">
													确认收货
												</div>
											</div>
										</div>

									</div>
									<!-- 数据完毕 -->
								</div>
							</div>
						</div>
						<div id="item5" class="mui-slider-item mui-control-content">
							<div id="scroll5" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<!-- 5 -->
									<!-- <div class="mui-loading">
									<div class="mui-spinner">
									</div>
								</div> -->
									<!-- 列表数据 -->
									<div class="cart-list">
										<!-- 渲染区域 -->
										<div class="cart-list-item">
											<div class="cart-list-item-top">
												<div class="order-code">
													订单编号：<span class="order-code-id">202103221448560001</span>
												</div>
												<div class="order-status">
													已完成
												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="cart-list-item-bottom">
												<div class="order-youhui">
													<span id="">
														已优惠<span class="youhui-num">20.00</span>元 ,
													</span>
												</div>
												<div class="order-status">
													实付: <span class="fuhao">￥</span><span
														class="shifu-num">180.00</span><span
														class="no-yunfei">(免运费)</span>
												</div>
											</div>
											<!-- 操作按钮区域 -->
											<div class="order-edit">
												<!-- <div class="order-btn wuliu-btn">
												查看物流
											</div>
											<div class="order-btn makesure-btn">
												确认收货
											</div>
											<div class="order-btn detail-btn">
												查看详情
											</div>
											<div class="order-btn pingjia-btn">
												发表评价
											</div> -->
												<div class="order-btn rebuy-btn">
													再来一单
												</div>
											</div>
										</div>

									</div>
									<!-- 数据完毕 -->
									<!-- 列表数据 -->
									<div class="cart-list">
										<!-- 渲染区域 -->
										<div class="cart-list-item">
											<div class="cart-list-item-top">
												<div class="order-code">
													订单编号：<span class="order-code-id">202103221448560001</span>
												</div>
												<div class="order-status">
													已完成
												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="cart-list-item-bottom">
												<div class="order-youhui">
													<span id="">
														已优惠<span class="youhui-num">20.00</span>元 ,
													</span>
												</div>
												<div class="order-status">
													实付: <span class="fuhao">￥</span><span
														class="shifu-num">180.00</span><span
														class="no-yunfei">(免运费)</span>
												</div>
											</div>
											<!-- 操作按钮区域 -->
											<div class="order-edit">
												<!-- <div class="order-btn wuliu-btn">
												查看物流
											</div>
											<div class="order-btn makesure-btn">
												确认收货
											</div>
											<div class="order-btn detail-btn">
												查看详情
											</div> -->

												<div class="order-btn rebuy-btn">
													再来一单
												</div>
												<div class="order-btn pingjia-btn" id="evaluate">
													发表评价
												</div>
												<div class="order-btn pingjia-btn" id="retreat">
													退货
												</div>
											</div>
										</div>

									</div>
									<!-- 数据完毕 -->
									<!-- 列表数据 -->
									<div class="cart-list">
										<!-- 渲染区域 -->
										<div class="cart-list-item">
											<div class="cart-list-item-top">
												<div class="order-code">
													订单编号：<span class="order-code-id">202103221448560001</span>
												</div>
												<div class="order-status">
													已完成
												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="recommend-list-item">
												<img src="../../../../images/home/demo.jpg" class="recommend-img">
												<div class="recommend-info">
													<div class="goods-info">
														<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
															今日下单即赠新品...</span>
														<span class="goods-code">编号:1234</span>
													</div>

													<div class="goods-last">
														<span class="goods-price">￥<span
																class="fuhao">69.80</span></span>

														<div class="goods-number">
															x<span class="order-num">56</span>
														</div>
													</div>

												</div>
											</div>
											<div class="cart-list-item-bottom">
												<div class="order-youhui">
													<span id="">
														已优惠<span class="youhui-num">20.00</span>元 ,
													</span>
												</div>
												<div class="order-status">
													实付: <span class="fuhao">￥</span><span
														class="shifu-num">180.00</span><span
														class="no-yunfei">(免运费)</span>
												</div>
											</div>
											<!-- 操作按钮区域 -->
											<div class="order-edit">
												<div class="order-btn wuliu-btn">
													查看物流
												</div>
												<!-- <div class="order-btn makesure-btn">
												确认收货
											</div>
											<div class="order-btn detail-btn">
												查看详情
											</div> -->

												<!-- <div class="order-btn rebuy-btn">
													再来一单
												</div>
												<div class="order-btn pingjia-btn">
													发表评价
												</div> -->
											</div>
										</div>

									</div>
									<!-- 数据完毕 -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../../../js/jquery-3.4.1.min.js"></script>
		<script src="../../../../js/resize.js"></script>
		<script src="../../../../js/getUrlQuery.js"></script>
		<script src="../../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// mui.init({
			//     swipeBack: false
			// });
			$(function($) {
				// tap事件
				$.tapHandle()
				// 文档一加载就执行
				$(document).ready(function() {
					obj.setRem()
				})
				// 页面自适应
				$(window).resize(function() {
					obj.setRem()
				});
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				// 接收页面参数
				// var query = getRequest();
				// console.log(query);
				// var typeid = query.typeid;
				// if(typeid){
				//     $('.mui-control-content').eq(typeid).attr('class','mui-slider-item mui-control-content mui-active');
				//     $('.mui-control-content').eq(typeid).siblings('.mui-slider-item').attr('class','mui-slider-item mui-control-content');
				//     $('.mui-control-item').eq(typeid).attr('class','mui-control-item mui-active');
				//     $('.mui-control-item').eq(typeid).siblings('.mui-control-item').attr('class','mui-control-item');
				//     console.log($('.mui-control-content').eq(typeid),'当前');

				// }
				// 监听页面滑动事件
				var el_slider = document.getElementById('slider');
				el_slider && el_slider.addEventListener('slide', function(e) {
					console.log(e, '滑动组件');
					const {
						detail: {
							slideNumber = null
						}
					} = e;
					$('.mui-control-item').eq(slideNumber).attr('class', 'mui-control-item mui-active');
					$('.mui-control-item').eq(slideNumber).siblings('.mui-control-item').attr('class',
						'mui-control-item');
				})
				// 取消订单
				$('.mui-slider-item').on('click', '.cancel-btn', function() {
					mui.confirm('您确认要取消此订单吗？取消后款项将原路退回您的付款账户', '温馨提示', ['我再想想', '确认取消'], function(e) {
						console.log(e.index); // 0 我再想想 1 确认取消
					}, 'div')
				})
				// 提醒发货伪功能
				$('.remind-btn').click(function() {
					mui.toast('已提醒卖家尽快发货，请您耐心等待', {
						duration: 'short',
						type: 'div'
					})
				})
				// 查看物流
				$('.mui-slider-item').on('click', '.wuliu-btn', function() {
					window.location.href = '../logistics/index.html';
				})
				// 查看详情
				$('.cart-list-item .recommend-list-item').on('click', function() {
					window.location.href = '../orderdetail/index.html';
				})
				// 发表评价
				$('#evaluate').on('tap', function() {
					window.location.href = '../evaluate/index.html';
				})
				// 退  
				$('#retreat').on('tap', function() {
					window.location.href = '../retreat/index.html';
				})
			});
		</script>
	</body>

</html>
